How To Iterate Over Items in Vue.js With V

By Alligator.io

A common requirement for front-end applications is listing out items. It can take the form of a to-do list and card systems. Vue.js supports rendering lists of items onto the browser using the built-in v-forDOCTYPE html> v-for {{ message }} new Vue({ el: "#app", data() { return { message: "hello" } } });

You can refer to this post if you’re getting started with Vue.js.

At this point, if you were to upload this code and view this file in a browser, you will see the message: "hello".

The built-in v-for directive allows us to loop through items.

We can use a range in the v-for directive to iterate a specified number of times.

Let’s replace the contents of our with an unordered list that repeats list items 15 times:

This will result in an unordered list with numbers 1 to 15.

The v-for directive only applies to the element that it’s attached to. If multiple items should repeat with the v-for directive, we should wrap the elements in a element.

Let’s replace the contents of our with a :

This will result in a collection of repeating s and s.

We can loop over the values in an objectItems object from the data model. This can be accomplished by adding the v-for directive in the element that should be repeated.

Let’s modify the lines in data() so it returns an objectItems object:

Let’s replace the contents of our with an unordered list that repeats list items:

Here’s how things will look:

This will result in an unordered list with the property values from the object.

In addition to the property value, we get two additional parameters when looping over objects with Vue. Namely, the key and the index values.

The key value gives us access to the current properties key.

The index provides us the index of the current item in the loop. This is the position of the item in the looped list.

Let’s replace the contents of our with an unordered list that repeats list items with item, key, and index:

Here’s how things will look:

This will result in an unordered list with the item, key, and index.

We can loop over the items in a shoppingItems array from the data model. This can be accomplished by adding the v-for directive in the element that should be repeated.

Let’s modify the lines in data() so it returns a shoppingItems array with objects:

We can loop over the objects in the shoppingItems array and access the values using a given key.

Let’s replace the contents of our with an unordered list that repeats list items with item.name and item.price:

Here’s how things will look:

This will result in an unordered list with the values from the array.

When the array order is changed, by default Vue would change the data in each existing element rather than moving the DOM elements to the updated position.

We can set Vue to track each element using a key. This would cause it to move elements rather than replacing values.

This value should be unique to each element that’s being iterated over.

Let’s assign a key using item.name:

Now, Vue has a way of tracking a node’s identity as changes are made.

Out of the box, v-for supports array mutation methods. These are push, pop, shift, unshift, splice, sort and reverse. If any of these operations are performed on an array, the v-for directive updates the view with the new data.

Also, when we replace an array with a new array, Vue finds the most optimized way to update the items.

The two things that Vue cannot track when changed in an array are:

Example:

This can be resolved by using the Vue.set method. This method accepts the array, an index, and the new value.

Also, we can use splice to set the value at a given index.

Example:

We can use splice to modify the array length instead of setting it directly to avoid issues.

We can filter out lists that are being displayed without changing the original list. This can be done using computed values or by having a method and passing values through when setting the v-for values.

Instead of setting the value directly on the list, we instead point to a computed value. We can write the logic for filtering out data in that computed function.

First, let’s define itemsLessThanTen:

Here’s how things will look:

The itemLessThanTen function uses the JavaScript filter function to return any item with a price is less than 10.

In this approach, we pass in the same shoppingItems list directly to a method that we define. By doing so, all the items in the array would be filtered according to the method definition.

First, let’s define filterItems:

Here’s how things will look:

The filterItems method performs the same function as in the computed value example, and the final result would be the same.

In this article, you learned about using v-for in Vue applications. You were introduced to ranges, keys, computed, and methods.

If you’d like to learn more about Vue.js, check out our Vue.js topic page for exercises and programming projects.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

author

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

How could I execute a function for the values ​​inside the for loop? for example: item.price = item.price * 0.01

Thanks